import React, { Component } from 'react';
import {
  Form, DatePicker, Checkbox, Select,Button
} from 'antd';
import SelectUser from "../../../components/SelectUser";
import '../Task.less';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const userdata = [
  {
    "title": "测试一部",
    "key": "a",
    "treeType": "1",
    "clildren": [
      {
        "title": "测试一部",
        "key": "393412400792993801",
        "treeType": "1",
        "clildren": null
      },
      {
        "title": "李四",
        "key": "393412400792993802",
        "treeType": "2",
        "clildren": null
      },
      {
        "title": "测试人员3",
        "key": "394807930752335903",
        "treeType": "2",
        "clildren": null
      }
    ]
  },
  {
    "title": "测试二部",
    "key": "b",
    "treeType": "1",
    "clildren": [
      {
        "title": "测试一部",
        "key": "395241451308449804",
        "treeType": "2",
        "clildren": null
      },
      {
        "title": "李四",
        "key": "393412400792993805",
        "treeType": "2",
        "clildren": null
      },
      {
        "title": "测试人员3",
        "key": "394807930752335906",
        "treeType": "2",
        "clildren": null
      }
    ]
  },
  {
    "title": "测试三部",
    "key": "c",
    "treeType": "1",
    "clildren": [
      {
        "title": "李娜",
        "key": "394807930752335907",
        "treeType": "2",
        "clildren": null
      }
    ]
  },
  {
    "title": "测试人员1",
    "key": "394807930752335908",
    "treeType": "2",
    "clildren": null
  }, {
    "title": "测试人员2",
    "key": "394807930752335909",
    "treeType": "2",
    "clildren": null
  }, {
    "title": "测试人员3",
    "key": "3948079307523359010",
    "treeType": "2",
    "clildren": null
  }
];



@Form.create()
export default class TaskDetailRelatedMatters extends Component {
  componentDidMount() {
  }


  render() {



    return (
      <div className="TaskDetail TaskDetailShift">
        <div className="taskdetail-title">
          调班-代班
        </div>
        <div className="dh" />
        <div className="Select-box">

          <div className="select-list">
            <div className="listtitle">谁要调班?（单选）</div>
            <SelectUser value={"394807930752335907"} type="radio" data={userdata} onSelect={(val) => { console.log(val); }} />
          </div>


          <div className="select-list">
            <div className="listtitle">哪个班次要调?</div>
            <div className="ShiftSelect">
              <div className="select-time">排班时间:<RangePicker style={{ width: 199 }} placeholder={["开始时间", "结束时间"]} /></div>
              <div className="select-all"> <Checkbox>全选</Checkbox></div>
              <Select className="select-month" defaultValue="lucy">
                <Option value="jack">11</Option>
                <Option value="lucy">12</Option>
              </Select>
              <Checkbox.Group style={{ width: '100%' }} >
                <div className="ShiftSelect-list-box">
                  <div className="ShiftSelect-row">
                    <div className="ShiftSelect-number">11</div>
                    <Checkbox value="A">10:00~12:00</Checkbox>
                    <Checkbox value="A">10:00~12:00</Checkbox>
                  </div>
                  <div className="ShiftSelect-row">
                    <div className="ShiftSelect-number">11</div>
                    <Checkbox value="A">10:00~12:00</Checkbox>
                    <Checkbox value="A">10:00~12:00</Checkbox>
                  </div>
                  <div className="ShiftSelect-row">
                    <div className="ShiftSelect-number">11</div>
                    <Checkbox value="A">10:00~12:00</Checkbox>
                    <Checkbox value="A">10:00~12:00</Checkbox>
                  </div>
                </div>
              </Checkbox.Group>
            </div>
          </div>

          <div className="select-list">
            <div className="listtitle">调给谁？（可多选）</div>
            <SelectUser value={["394807930752335907"]} type="checkbox" data={userdata} onSelect={(val) => { console.log(val); }} />
          </div>

        </div>
        <div className="btnbox"><Button>取消</Button><Button type="primary">选好了</Button></div>
      </div>
    );
  }
}

